<template>
    <div class="chengguan">
        <ModalTitle title="智慧城管情况分析" />
        <div class="chengguan-box">
            <div class="box-outside">
                <div class="box-chart" id="box-left" ref="chengguanLeft"></div>
                <p>结案率</p>
            </div>
            <div class="box-outside">
                <div class="box-chart" id="box-right" ref="chengguanRight"></div>
                <p>按时结案率</p>
            </div>
        </div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue'
import { ZongHeZhiFaDB } from '@/api/zhangzi'

export default {
    components: {
        ModalTitle
    },

    data() {
        return {

        }
    },

    mounted() {
        this.getCompletionRateFn()
    },
    
    methods: {
        getCompletionRateFn() {
            ZongHeZhiFaDB.getCompletionRate().then(res => {
                console.log(res, 'res')
                if (res.code == 200) {
                    let data = res.data
                    this.chengguanLeftFn('chengguanLeft', data.totalCaseCloseRate * 100)
                    this.chengguanLeftFn('chengguanRight', data.totalOnTimeCaseCloseRate * 100)
                }
            })
        },

        chengguanLeftFn(chartType, value) {
            var leftChart = echarts.init(this.$refs[chartType])
            let angle = 0;//角度，用来做简单的动画效果的
            let option = {
                // backgroundColor: "#061740",
                title: {
                    text: '{a|' + value + '}{c|%}',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        rich: {
                            a: {
                                fontSize: 20,
                                color: '#ffffff',
                                fontWeight: 'bold'
                            },
                            c: {
                                fontSize: 20,
                                color: '#ffffff',
                                fontWeight: 'normal'
                            }
                        }
                    }
                },
                series: [
                    //内环
                    {
                        name: "",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
                                    startAngle: (0 + -angle) * Math.PI / 180,
                                    endAngle: (360 + -angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: "#0CD3DB",
                                    fill: "transparent",
                                    lineWidth: 0.5
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    //外环
                    {
                        name: '',
                        type: 'pie',
                        radius: ['85%', '77%'],
                        silent: true,
                        clockwise: true,
                        startAngle: 90,
                        z: 0,
                        zlevel: 0,
                        label: {
                            normal: {
                                position: "center",
                            }
                        },
                        data: [
                            {
                                value: value,
                                name: "",
                                itemStyle: {
                                    normal: {
                                        //外环发光
                                        borderWidth: 0.5,
                                        shadowBlur: 20,
                                        borderColor: '#4bf3f9',
                                        shadowColor: '#9bfeff',
                                        color: { // 圆环的颜色
                                            colorStops: [{
                                                offset: 0,
                                                color: '#4bf3f9', // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#4bf3f9', // 100% 处的颜色
                                            }]
                                        },
                                    }
                                }
                            },
                            {
                                value: 100 - value,
                                name: "",
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: "#173164"
                                    }
                                }
                            }
                        ]
                    },
                ]
            };
            leftChart.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.chengguan {
    height: 28.4rem;

    .chengguan-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.6rem;
        
        .box-outside {
            &:nth-child(2) {
                margin-left: 5rem;
            }
            p { 
                width: 100%;
                font-size: 20px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                margin-top: 1.6rem;
            }
        }

        .box-chart {
            width: 13.5rem;
            height: 13.5rem;
        }
    }
}
</style>